<template>
    <div>
        I want to tell you,{{ word }}!
        Ask my teacher what she want to tell you....
        she say:{{id}}
        <input type="button" value="获取" @click="getTeacherWord">
        <br>
        <input type="button" value="testProps" @click="getId">
        <input type="button" value="testMeta" @click="getMeta">
        <input type="button" value="testFade" @click="setFade">
        <p v-if="show">hello</p>
        <div v-text="teacherWord"></div>
        在这里显示HelloWorld的内容
        <router-link to="/">入口</router-link>
    </div>
</template>

<script>
    let MyWord = {
        props: ['id'],
        name: "GoodBye",
        data() {
            return {
                word: 'good bye',
                teacherWord: '',
                show: false
            }
        },
        methods: {
            setFade() {
                this.show = !this.show
            },
            getMeta() {
                console.log(this.$route.matched)
                console.log(this.$route.matched.some(r => r.meta.isBye))
            },
            getId() {
                console.log(this.id);
            },
            getTeacherWord() {
                this.$http.get('/teacherWord')
                    .then(config => {
                        console.log(config)
                        this.teacherWord = config.data
                    }).catch(error => {//在myWord这个组件内部访问router路由器，和本组路由
                    console.log("this.$router=", this.$router);
                    console.log("this.$route=", this.$route);
                })
            }
        },
        watch: {
            // 'this.$route'
            'this.$route'(to, from) {
                // 对路由变化作出响应...
                this.teacherWord = ''
            }
        },
        beforeRouteEnter(to, from, next) {
            console.log(to);
            console.log(from);
            next()
        }

    }

    export default MyWord
    // myWord,//这成了子类，是不行的
</script>

<style scoped>

</style>
